/**
 * forwardRef 结合  useRef使用
 *
 * forwardRef 可以在父组件中操作子组件的 ref 对象
 * forwardRef 可以将父组件中的 ref 对象转发到子组件中的 dom 元素上
 * 子组件接受 props 和 ref 作为参数
 */
import React, { useRef, MutableRefObject, forwardRef } from 'react';
import { Button } from 'antd-mobile';

function ForwardRefCom() {
  const forwardInputRef: MutableRefObject<any> = useRef(null); // 参数为必填，可填null
  function shuchu() {
    console.log(forwardInputRef.current.value);
  }
  function Child(props: any, ref: any) {
    return <input type='text' ref={ref} />;
  }
  const Child2 = forwardRef(Child);
  return (
    <div>
      <Child2 ref={forwardInputRef} />
      <Button onClick={() => shuchu()}>forwardInputRef</Button>
    </div>
  );
}
export default ForwardRefCom;
